.farris-tabs {
    position: relative;
    display: flex;
    flex: 1 1 auto;

    .margin-right-14 {
        margin-right: 14px;
    }

    .farris-tabs-header-extend {
        height: $f-pt-tabs-header-extend-height;
        display: flex;
        align-items: center;
    }

    .farris-tabs-header {
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        flex-grow: 0;
        align-items: center;
        margin: $f-pt-tabs-header-outer-gutter;
        padding: $f-pt-tabs-header-inner-gutter;

        .farris-tabs-title {
            position: relative;
            display: flex;
            width: 100%;

            &.scroll-tabs {
                .spacer {
                    margin: 0;

                    &.spacer-sides {
                        margin: 0 1.5625rem;
                    }

                    &.spacer-sides-dropdown {
                        margin: 0 3.75rem 0 1.75rem;
                    }

                    .farris-nav-tabs {
                        overflow: hidden;

                        .nav-item {
                            color: $farris-ptlayout-tabstrip-item-text;
                            border-width: $farris-ptlayout-tabstrip-item-border-width;
                            border-style: solid;
                            border-color: transparent;
                            font-size: $f-pt-tabs-header-font-size;
                            margin: $f-pt-tabs-nav-item-outer-gutter;

                            &:hover {
                                color: $f-tabs-nav-item-hover-color;
                                border-color: transparent;
                            }

                            .nav-link {
                                border: none;
                                padding: $f-pt-tabs-nav-link-inner-gutter;
                                color: inherit;
                                cursor: pointer;
                                text-decoration: none;

                                &.tabs-f-text-overflow {
                                    overflow: hidden;
                                    white-space: nowrap;
                                    display: flex;
                                    align-items: center;
                                }

                                .farris-title-auto {
                                    max-width: none !important;
                                }

                                &.disabled {
                                    color: $farris-ptlayout-tabstrip-item-disable-text;
                                    background-color: transparent;
                                    border-color: transparent;
                                    pointer-events: none;
                                }

                                .st-tab-text {
                                    max-width: 310px;
                                    overflow: hidden;
                                }

                                .farris-title-text-custom {
                                    //不支持IE
                                    position: relative;

                                    &::after {
                                        position: absolute;
                                        content: '';
                                        height: 100%;
                                        position: absolute;
                                        right: 0;
                                        width: 30px;
                                        background-image: $f-tabs-title-text-custom-layout ;
                                    }
                                }
                            }

                            &.f-state-active {
                                border-color: $f-tabs-nav-item-state-active-border-color;
                                color: $f-tabs-nav-item-state-active-color;

                                &:hover {
                                    border-color: $f-tabs-nav-item-hover-border-color;
                                }

                                .nav-link {
                                    color: $f-tabs-nav-item-state-active-color;
                                }
                            }


                            &:active {
                                color: $f-tabs-nav-item-active-color;
                                border-color: transparent;
                            }

                        }

                        &.nav-fill {
                            .nav-item {
                                flex-shrink: 1;
                                flex-grow: 1;
                                flex-basis: 0;
                                background: $f-tabs-nav-fill-panel-header-bg;
                                border: none;
                                margin-right: 0;
                                margin-left: 0;

                                &.f-state-active {
                                    background-color: $f-tabs-nav-fill-panel-header-active-bg;
                                }

                                .nav-link {
                                    padding-top: $f-pt-tabs-panel-nav-link-inner-gutter-y;
                                    padding-bottom: $f-pt-tabs-panel-nav-link-inner-gutter-y;
                                    justify-content: center;

                                    .st-tab-text {
                                        max-width: none;
                                    }
                                }
                            }
                        }

                        &.nav-pills {
                            .nav-item {
                                border: none;
                                font-size: $f-tabs-nav-pills-link-font-size;
                                margin: $f-tabs-nav-pills-link-outer-gutter;

                                .nav-link {
                                    padding: $f-tabs-nav-pills-link-inner-gutter;
                                    color: $f-tabs-nav-pills-link-color;
                                    background: $f-tabs-nav-pills-link-bg;

                                    // 文字超长遮罩
                                    .farris-title-text-custom::after {
                                        display: none;
                                    }

                                    &:hover {
                                        color: $f-tabs-nav-pills-link-hover-color;
                                        background: $f-tabs-nav-pills-link-hover-bg;
                                    }

                                    &.disabled {
                                        opacity: 0.6;
                                    }
                                }

                                &.f-state-active {
                                    .nav-link {
                                        color: $f-tabs-nav-pills-link-active-color;
                                        background: $f-tabs-nav-pills-link-active-bg;
                                    }
                                }
                            }

                            &.nav-fill {
                                .nav-item {
                                    margin-left: 0;
                                    margin-right: 0;
                                }
                            }
                        }

                    }
                }

                .sc-nav-btn {
                    position: absolute;
                    z-index: 120; 
                    &.sc-nav-lr,
                    .sc-nav-rg,
                    .dropdown-toggle-split {
                        height: 1.25rem;
                        width: 1.25rem;
                        border-radius: $farris-border-radius;
                        border: 1px solid $f-tabs-dropdown-toggle-split-border;
                        background: $f-pt-tabs-nav-btn-bg;

                        &:hover {
                            border-color: $f-tabs-dropdown-toggle-split-hover-border;
                        }
                    }

                    &.sc-nav-lr {
                        left: 0px;
                        top: 50%;
                        margin-top: -0.625rem;

                        &::after {
                            content: ' ';
                            width: 0.5rem;
                            height: 0.5rem;
                            border-top: 1px solid $f-pt-tabs-nav-btn-color;
                            border-right: 1px solid $f-pt-tabs-nav-btn-color;
                            transform: rotate(225deg);
                            position: absolute;
                            top: 0.25rem;
                            left: 0.4375rem;
                        }
                    }

                    .sc-nav-rg {
                        padding: 0;

                        &::after {
                            content: ' ';
                            width: 0.5rem;
                            height: 0.5rem;
                            border-top: 1px solid $f-pt-tabs-nav-btn-color;
                            border-right: 1px solid $f-pt-tabs-nav-btn-color;
                            transform: rotate(45deg);
                            position: absolute;
                            top: 0.25rem;
                            right: 0.4375rem;
                        }
                    }

                    .dropdown-toggle-split {
                        color: $f-pt-tabs-nav-btn-color;
                        margin-left: 0.3125rem;
                        padding: 0;
                    }

                    &.dropdown {
                        position: absolute;
                        top: 50%;
                        margin-top: -0.625rem;
                        right: 0.375rem;
                    }

                    .dropdown-toggle {

                        &:hover,
                        &:active {
                            color: $f-tabs-dropdown-toggele-hover-border-color;
                        }

                        &::after {
                            content: ' ';
                            width: 1em;
                            height: 1em;
                            content: "\eb82";
                            font-family: FarrisIcons;
                            border: none;
                            font-size: 12px;
                            line-height: 1;
                            vertical-align: 1px;
                        }
                    }
                }

                .sc-nav-lr:hover:after,
                .sc-nav-rg:hover:after {
                    border-top: 1px solid $f-tabs-dropdown-toggele-hover-border-color;
                    border-right: 1px solid $f-tabs-dropdown-toggele-hover-border-color;
                }

                .sc-nav-lr:active:after,
                .sc-nav-rg:active:after {
                    border-top: 1px solid $f-tabs-dropdown-toggele-active-border-color;
                    border-right: 1px solid $f-tabs-dropdown-toggele-active-border-color;
                }
            }
        }

        &.farris-tabs-inHead {
            border-bottom: $f-tabs-header-border-bottom;

            .farris-tabs-title {
                width: 41.6666667%;
            }

            .farris-tabs-toolbar {
                flex: 1;
                align-items: center;
                width: 30%;
                display: flex;
                justify-content: flex-end;
                margin-left: 0.875rem;
            }
        }

        &.farris-tabs-inContent {
            .farris-tabs-title {
                border-bottom: $f-tabs-header-border-bottom;
            }

            .farris-tabs-toolbar {
                margin: 0.625rem 0;
            }
        }

        &.farris-tabs-nav-pills,
        &.farris-tabs-nav-fill {
            border: none;

            .farris-tabs-title {
                border: none;
            }
        }

        .farris-tabs-toolbar {
            .btn-link {
                margin-right: 0.75rem;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .dropdown-menu {
            margin-top: -1px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .st-drop-close {
            width: 1rem;
            height: 1rem;
            text-align: center;
            cursor: pointer;
            position: relative;
            opacity: 0;

            .material-icons {
                font-size: 1rem;
                margin: -0.625rem 0 0 0.3125rem;
            }
        }

        .active {
            color: $f-tabs-nav-item-state-active-color;

            .st-drop-close {
                opacity: 0.6;

                &:hover {
                    opacity: 1;
                }
            }
        }

        .f-tabs-toolbar-btn {
            padding: .125rem .8125rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            color: $f-tabs-toolbar-btn-color;
            border: none;
            background: none;
            white-space: nowrap;

            &:hover {
                color: $f-tabs-toolbar-btn-hover-color;
            }

            &:active {
                color: $f-tabs-toolbar-btn-active-color;
            }
        }

        .farris-tabs-inline-flex {
            display: inline-flex;
        }
    }

    .scroll-tab-tooltips {
        padding: 0;
        margin: 0;
        width: 7.5rem;
        text-align: left;

        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    }

    &.f-tabstrip-fill,
    &.f-tabs-content-fill {
        .f-tab-active {
            display: flex;
            flex: 1 1 auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            overflow: auto;
        }
    }

    &.f-tabs-content-fill {
        .f-tab-active {
            position: relative;
        }
    }

    .f-tab-d-none {
        display: none;
    }

    &.f-tabs-header-sm {
        .farris-tabs-header {
            .farris-tabs-title {
                &.scroll-tabs {
                    .spacer {
                        .farris-nav-tabs .nav-item .nav-link {
                            padding-top: 0.25rem;
                            padding-bottom: 0.25rem;
                        }
                    }
                }
            }
        }
    }
}

// pill显示方式的标签
.f-cmp-tabs-with-pill {
    .farris-tabs-header .farris-tabs-title.scroll-tabs .spacer .farris-nav-tabs {
        .nav-item {
            border-radius: 4px 4px 0 0;
            padding: 0 0.625rem;
            margin: 0 1rem 0 0;

            &.f-state-active {
                border-color: $f-theme-03;
                color: #fff;
                background: $f-theme-03;

                &:hover {
                    border-color: $f-theme-03;
                }

                .nav-link {
                    color: #fff;
                }
            }
        }
    }
}

.nav-pills {
    .nav-link {
        padding: $f-tabs-nav-pills-link-inner-gutter;
    }
}

.farris-tabs-toolbar .sc-nav-btn .morebtn {
    padding-right: 12px;
    padding-left: 12px;
    margin-right: 0 !important;
}

//帮助控件显示-覆盖帮助组件样式
.lookup-tabs-nav {
    .nav-item-selected {
        color: $f-theme-03 !important;
    }

    /*收藏样式*/
    .lookup-selected-total {
        color: $farris-btn-primary-color !important;
        background: $farris-btn-primary-bg !important;
    }

    .tabs-ink-bar {
        background: $f-theme-07 !important;
    }
}